import { Component, Vue } from 'vue-property-decorator'
import styles from './UpdateForm.less'
@Component({})
export default class UpdateForm extends Vue {
  private seal: any = {}

  protected render() {
    return (
      <div class={styles.printPage}>
        <div class={styles.pContainer}>
          <h1 style="text-align: center;">浙江省机构电子印章申请表</h1>
          <div>
            <h3>一、申请单位信息</h3>
            <div>
              <div>
                <p class="label">单位统一化规范全称：</p>
                <p class="content">
                  {/* {this.seal.organize} */}
                  <input
                    v-model={this.seal.organize}
                    disabled
                    type="text"
                    class="input"
                    style="width:577px"
                  />
                </p>
              </div>
              <div>
                <p class="label">单位类型：</p>
                <p class="content">
                  <input
                    v-model={this.seal.orgType}
                    disabled
                    type="text"
                    class="input"
                    style="width:657px"
                  />
                </p>
              </div>
              <div>
                <p class="label">证照类型：</p>
                <p class="content">
                  <input
                    v-model={this.seal.licenseType}
                    disabled
                    type="text"
                    class="input"
                    style="width:657px"
                  />
                </p>
              </div>
              <div>
                <p class="label">证照号码：</p>
                <p class="content">
                  <input
                    v-model={this.seal.licenseNumber}
                    disabled
                    type="text"
                    class="input"
                    style="width:657px"
                  />
                </p>
              </div>
            </div>
            <h3>二、经办人基本信息</h3>
            <div>
              <div>
                <p class="label">经办人姓名：</p>
                <p class="content">
                  <input
                    v-model={this.seal.agentName}
                    disabled
                    type="text"
                    class="input"
                    style="width:641px"
                  />
                </p>
              </div>
              <div>
                <p class="label">经办人证件类型：</p>
                <p class="content">
                  <input
                    v-model={this.seal.agentLicenseType}
                    disabled
                    type="text"
                    class="input"
                    style="width:610px"
                  />
                </p>
              </div>
              <div>
                <p class="label">经办人证件号：</p>
                <p class="content">
                  <input
                    v-model={this.seal.agentLicenseNumber}
                    disabled
                    type="text"
                    class="input"
                    style="width:626px"
                  />
                </p>
              </div>
              <div>
                <p class="label">经办人手机号：</p>
                <p class="content">
                  <input
                    v-model={this.seal.agentMobile}
                    disabled
                    type="text"
                    class="input"
                    style="width:626px"
                  />
                </p>
              </div>
            </div>
            <h3>三、电子印章基本信息</h3>
            <div>
              <div>
                <p class="label">申请电子印章名称：</p>
                <p class="content">
                  <input
                    v-model={this.seal.sealName}
                    disabled
                    type="text"
                    class="input"
                    style="width:593px"
                  />
                </p>
              </div>
              <div>
                <p class="label">变更后电子印章名称：</p>
                <p class="content">
                  <input
                    v-model={this.seal.newSealName}
                    disabled
                    type="text"
                    class="input"
                    style="width:577px"
                  />
                </p>
              </div>
              <div>
                <p class="label">申请电子印章类别：</p>
                <p class="content">
                  <input
                    v-model={this.seal.sealType}
                    disabled
                    type="text"
                    class="input"
                    style="width:593px"
                  />
                </p>
              </div>
              <div>
                <p class="label">申请电子印章用章类型：</p>
                <p class="content">
                  <input
                    v-model={this.seal.useType}
                    disabled
                    type="text"
                    class="input"
                    style="width:562px"
                  />
                </p>
              </div>
            </div>
            <h3>四、说明</h3>
            <div>
              <p>1、此申请表需加盖审批机构公章。</p>
              <p>2、请在下列空白框内加盖印模。</p>
              <p>3、每张申请表只支持加盖一个印模，请确认加盖的印模清晰可辨。</p>
              <p>4、此申请表由受理机构保存。</p>
              <p>
                5、组织机构的电子法定名称章需要上级主管部门审批，其他专用章（包括经济合同章、财务专用章等）在名称样式上应与单位正式印章有所区别，经本单位领导批准后可以申请。
              </p>
            </div>
            <div>
              <div class="seal-img">
                <h4>原印章图片信息</h4>
                <div class="box">
                  <img src={this.seal.sealImg} />
                </div>
              </div>
              <div class="seal-img">
                <h4>
                  变更后印模信息
                  <span style="font-weight: 400;">
                    （印模须加盖在本框的正中位置）
                  </span>
                </h4>
                <div class="box" />
              </div>
              <div class="vh">
                <p style="float:left; width: 100%; padding-top:20px;">
                  <p style="width:280px;height:22px;float: left;" />
                  <p class="label">
                    审批机构：
                    <input
                      v-model={this.seal.auditOrg}
                      disabled
                      type="text"
                      class="input"
                      style="width:386px"
                    />
                  </p>
                </p>
                <p style="line-height: 149px;font-size:18px;float:left;margin-left: 407px;">
                  审批机构盖章：
                </p>
                <p style="font-size:15px;position: absolute;bottom:0px;right:0;">
                  日期：_______年______月______日
                </p>
              </div>
            </div>
          </div>
        </div>
        <div style="text-align: center">
          <button onClick={this.print} class="print-btn noprint">
            打印
          </button>
        </div>
      </div>
    )
  }

  private mounted() {
    this.seal = JSON.parse(sessionStorage.getItem('updateInfo') || '{}')
  }

  private print() {
    window.print()
  }
}
